import React, { Component } from 'react'
// 挂载时阶段 --- 初始化阶段
//    constructor --- 初始化数据，绑定事件   ------   一般不需要使用
//    static getDerivedStateFromProps  ---- 一般用不到
//    render  ---- 初次渲染数据 --- 必须使用
//    componentDidMount ----  可以使用，比较常用
// 更新时阶段 --- 运行时阶段
//    static getDerivedStateFromProps  ---- 一般用不到
//    shouldComponentUpdate --- 可以使用，提升性能
//    render
//    getSnapshotBeforeUpdate --- 一般用不到  
//    componentDidUpdate ---- DOM操作，特定条件下修改状态（获取数据）
// 卸载时阶段 --- 销毁阶段
//    componentWillUnmount --- 组件卸载时操作  ---- 销毁创建的对象，销毁定时器，计时器等

// 错误异常
//    componentDidCatch  ---- 设定错误异常组件  ---- 可以使用
//    static getDerivedStateFromError() ---- 设定错误异常组件 ---- 可以使用
export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = { count: 1}
  }
  static getDerivedStateFromProps () {
    // 调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用
    // 一般用不到
    return null
  }
  render() {
    return (
      <div>
        <button onClick = { () => {
          this.setState({count: this.state.count + 1})
        }}>
          { this.state.count }
        </button>
      </div>
    )
  }
  componentDidMount () {
    // 请求数据，DOM操作 类似于vue的mounted
    // 修改状态
  }
  shouldComponentUpdate () {
    return true
  }
  getSnapshotBeforeUpdate () {

  }
  componentDidUpdate () {

  }
  componentWillUnmount () {}
}
